@main_nav_icon_p_x: -28px;

.main {
    position: relative;
    width: 100%;
    padding: 6px 12px 30px;
    background-color: #fff;

    &::after {
        position: absolute;
        display: block;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 25px;
        background-image: linear-gradient(0deg, #f4f4f4, #fff);
        content: '';
    }

    .list_nav {
        position: absolute;
        display: flex;
        transform: translate(-50%, 0);
        left: 50%;
        bottom: 0;
        height: 25px;
        width: 30px;
        z-index: 1;

        span,
        i {
            height: 4px;
            border-radius: 2px;
        }

        span {
            width: 14px;
            background-color: #0086f6;
        }

        i {
            width: 4px;
            margin-left: 4px;
            background-color: #cccccc;
        }
    }

    .main_nav {
        overflow: hidden;
        display: flex;
        width: 100%;
        height: 184px;
        margin: 0 auto;
        border-radius: 10px;

        ul {
            display: flex;
            flex-direction: column;
            flex: 1;

            &:nth-child(-n+4) {
                margin-right: 1px;
            }

            li {
                flex: 1;
                margin-top: 1px;

                &:first-child {
                    margin-top: 0;

                    a {
                        color: #fff;
                    }
                }

                a {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                    height: 100%;
                    font-size: 12px;

                    span {
                        width: 28px;
                        height: 28px;
                        background: url(../images/nav.png) no-repeat;
                        background-position-x: 0;
                        background-size: cover;
                    }

                    i {}
                }
            }

            &:nth-child(1) li {
                background-color: #fff5f1;

                &:first-child {
                    background: linear-gradient(#fa5a56, #fb8550);

                    a span {
                        background-position-y: @main_nav_icon_p_x * 3;
                    }
                }

                &:nth-child(2) {
                    a span {
                        background-position-y: @main_nav_icon_p_x * 12;
                    }
                }

                &:nth-child(3) {
                    a span {
                        background-position-y: @main_nav_icon_p_x * 0;
                    }
                }


            }

            &:nth-child(2) li {
                background-color: #eff9ff;

                &:first-child {
                    background: linear-gradient(#3c83fa, #50b2fa);

                    a span {
                        background-position-y: @main_nav_icon_p_x * 6;
                    }
                }


                &:nth-child(2) {
                    a span {
                        background-position-y: @main_nav_icon_p_x * 2;
                    }
                }


                &:nth-child(3) {
                    a span {
                        background-position-y: @main_nav_icon_p_x * 10;
                    }
                }
            }


            &:nth-child(3) li {
                background-color: #f2f5ff;

                &:first-child {
                    background: linear-gradient(#5e80ff, #65a3ff);

                    a span {
                        background-position-y: @main_nav_icon_p_x * 13;
                    }
                }

                &:nth-child(2) {
                    a span {
                        background-position-y: @main_nav_icon_p_x * 8;
                    }
                }

                &:nth-child(3) {
                    a span {
                        background-position-y: @main_nav_icon_p_x * 9;
                    }
                }


            }

            &:nth-child(4) li {
                background-color: #ecfcf8;

                &:first-child {
                    background: linear-gradient(#30c4b6, #51d8b3);

                    a span {
                        background-position-y: @main_nav_icon_p_x * 5;
                    }
                }

                &:nth-child(2) {
                    a span {
                        background-position-y: @main_nav_icon_p_x * 7;
                    }
                }

                &:nth-child(3) {
                    a span {
                        background-position-y: @main_nav_icon_p_x * 14;
                    }
                }


            }

            &:nth-child(5) li {
                background-color: #fff9f2;

                &:first-child {
                    background: linear-gradient(#ff8939, #ffa745);

                    a span {
                        background-position-y: @main_nav_icon_p_x * 1;
                    }
                }

                &:nth-child(2) {
                    a span {
                        background-position-y: @main_nav_icon_p_x * 4;
                    }
                }

                &:nth-child(3) {
                    a span {
                        background-position-y: @main_nav_icon_p_x * 11;
                    }
                }



            }
        }


    }
}
